<script setup lang="ts">
import HelloWorld from "./components/HelloWorld.vue";
import { IconPlus, IconDelete } from "@arco-design/web-vue/es/icon";
import { ref,reactive } from "vue";
import ExcelImport from "./components/ExcelImport.vue";

const visible = ref(false);

const handleClick = () => {
  visible.value = true;
};
const handleOk = () => {
  visible.value = false;
};
const handleCancel = () => {
  visible.value = false;
};

const data = [
  ["姓名", "年龄", "出生年月"],
  ["张三", 25, "1990-01-01"],
  ["李四", 30, "1985-05-10"],
  ["王五", 28, "1992-09-15"],
  ["赵六", 26, "1995-02-20"],
  ["孙七", 24, "1998-04-05"],
];

const columns = [
  {
    title: "姓名",
    dataIndex: "name",
  },
  {
    title: "年龄",
    dataIndex: "age",
  },
  {
    title: "出生年月",
    dataIndex: "birthDate",
  }
  
];
const msg="传参成功"
const  filename="用户信息表"

</script>

<template>
  <div>测试各种功能</div>
  <a-space>
    <a-button type="primary">
      <template #icon>
        <icon-plus />
      </template>
    </a-button>
    <a-button type="primary" @click="handleClick">
      <template #icon>
        <icon-delete />
      </template>
      <!-- Use the default slot to avoid extra spaces -->
      <template #default>Delete</template>
    </a-button>
  </a-space>

  <!-- 弹出对话框 -->
  <a-modal
    v-model:visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    
    width="90%"
    
    okText="提交"
    cancelText="取消"
  >
    <template #title> 标题 </template>
    <ExcelImport :data="data"
    :msg="msg"
    :cloumns="columns"
    :filename="filename" />
  </a-modal>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
